<template>
	<view class="search-page">
		<view style="padding: 20px;">
			<view style="margin-bottom: 20px; font-size: 18px; font-weight: bold;">测试搜索数据加载</view>
			
			<!-- 调试信息 -->
			<view style="background: #f0f0f0; padding: 10px; margin-bottom: 20px; border-radius: 5px;">
				<text style="display: block;">userId: {{ userId }}</text>
				<text style="display: block;">historyList长度: {{ historyList.length }}</text>
				<text style="display: block;">hotList长度: {{ hotList.length }}</text>
				<text style="display: block;">baseUrl: {{ $baseUrl }}</text>
			</view>
			
			<!-- 原始数据 -->
			<view style="background: #e8f5e9; padding: 10px; margin-bottom: 20px; border-radius: 5px;">
				<text style="display: block; font-weight: bold; margin-bottom: 10px;">历史搜索数据：</text>
				<text style="display: block;">{{ JSON.stringify(historyList) }}</text>
			</view>
			
			<view style="background: #e3f2fd; padding: 10px; margin-bottom: 20px; border-radius: 5px;">
				<text style="display: block; font-weight: bold; margin-bottom: 10px;">热门推荐数据：</text>
				<text style="display: block;">{{ JSON.stringify(hotList) }}</text>
			</view>
			
			<!-- 历史搜索 -->
			<view style="margin-bottom: 20px;" v-if="historyList.length > 0">
				<text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px;">📋 历史搜索</text>
				<view style="display: flex; flex-wrap: wrap; gap: 10px;">
					<view 
						v-for="(item, index) in historyList" 
						:key="index" 
						style="padding: 8px 16px; background: #f5f5f5; border-radius: 8px; color: #333;"
					>
						{{ item }}
					</view>
				</view>
			</view>
			
			<!-- 热门推荐 -->
			<view style="margin-bottom: 20px;">
				<text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px;">🔥 热门推荐</text>
				<view style="display: flex; flex-wrap: wrap; gap: 10px;">
					<view 
						v-for="(item, index) in hotList" 
						:key="index" 
						style="padding: 8px 16px; background: #e6f2ff; border-radius: 8px; color: #1989fa;"
					>
						{{ item }}
					</view>
				</view>
			</view>
			
			<button @click="reloadData" style="margin-top: 20px;">重新加载数据</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			historyList: [],
			hotList: [],
			userId: null
		};
	},
	
	onLoad(options) {
		console.log('=== 测试页面加载 ===');
		
		// 获取用户ID
		const userInfo = uni.getStorageSync('userInfo');
		if (userInfo && userInfo.id) {
			this.userId = userInfo.id;
			console.log('用户ID:', this.userId);
		} else {
			this.userId = 1;
			console.log('使用默认用户ID: 1');
		}
		
		// 加载数据
		this.loadSearchSuggest();
	},
	
	methods: {
		// 加载搜索建议
		async loadSearchSuggest() {
			console.log('=== 开始加载搜索建议 ===');
			console.log('baseUrl:', this.$baseUrl);
			console.log('userId:', this.userId);
			console.log('$http是否存在:', !!this.$http);
			
			try {
				const res = await this.$http({
					url: '/api/search/suggest',
					method: 'GET',
					data: {
						userId: this.userId
					}
				});
				
				console.log('=== API响应 ===');
				console.log('完整响应:', res);
				console.log('res.data:', res.data);
				
				if (res.data && res.data.code === 200) {
					this.historyList = res.data.data.history || [];
					this.hotList = res.data.data.hot || [];
					
					console.log('=== 数据已设置 ===');
					console.log('historyList:', this.historyList);
					console.log('hotList:', this.hotList);
					
					// 强制更新
					this.$forceUpdate();
					
					uni.showToast({
						title: '数据加载成功',
						icon: 'success'
					});
				} else {
					console.error('API返回错误:', res.data);
					uni.showToast({
						title: 'API返回错误',
						icon: 'none'
					});
				}
			} catch (e) {
				console.error('=== 加载失败 ===');
				console.error('错误详情:', e);
				uni.showToast({
					title: '加载失败: ' + e.message,
					icon: 'none',
					duration: 3000
				});
			}
		},
		
		reloadData() {
			console.log('=== 手动重新加载 ===');
			this.loadSearchSuggest();
		}
	}
};
</script>

<style scoped>
.search-page {
	min-height: 100vh;
	background-color: #FFFFFF;
}
</style>
